<template>
  <!-- 运营管理-官网详情设置 -->
  <div class="ow_detailset">
    <div class="content-detail">
      <div class="leftbox">
        <div class="left-row" style="display:flex;justify-content: space-between;">
          <span style="padding: 0.08rem 0rem;color: #666666;font-size: 0.18rem;">预览区域</span>
          <el-button size="medium" style="font-size: 0.18rem;" type="text" @click="templateSelect">选模板</el-button>
        </div>
        <iframe v-if="templatePageUrl" class="officalWeb" :src="templatePageUrl" frameborder="0">
          <p>您的浏览器不支持iframes组件.</p>
        </iframe>
        <img v-else class="officalWeb" :src="templateImageSrc" />
      </div>
      <div class="splitline"></div>
      <div class="rightbox">
        <el-tabs class="tabsControl" v-model="tabsObj.activeName" @tab-click="tabshandleClick">
          
          <!-- 动态字段 -->
          <el-tab-pane v-for="(row,index) in dynamicData" :key="index"
           :v-model="dynamicData[index]" :label="row.columnName" :name="row.columnName">
            <!-- 1-表单；2-表格；4-单个富文本编辑器；3-卡片 -->
            <div v-if="row.styleType==1" :class="tabsObj.tabsClassName[row.styleType]">
              <dynamicForm :ref="'pdynamicForm'+row.columnId" :dynamicForm="row"></dynamicForm>
            </div>
            <div v-else-if="row.styleType==4" :class="tabsObj.tabsClassName[row.styleType]">
               <!-- <keep-alive>
                <editor :ref="row.siteModelFileds[0].editorId" 
                    :id="row.siteModelFileds[0].editorId" 
                    v-bind:r_content="row.editeModelContent[row.siteModelFileds[0].filedName]"
                    :hight="500">
                </editor>
              </keep-alive> -->
              <wangeditor :editorId="'detailsetEditor'+index" :catchData="(d)=>{row.editeModelContent[row.siteModelFileds[0].filedName]=d;}"
                  :content="row.editeModelContent[row.siteModelFileds[0].filedName]" :contenteditable="row.isReadonly!=1"></wangeditor>
            </div>
            <div v-else-if="row.styleType==3" :class="tabsObj.tabsClassName[row.styleType]">
              <el-card v-for="(row2,index2) in row.modelContent.contentData" v-model="row.modelContent.contentData[index2]" :key="index2" :body-style="{ padding: '0px' }">
                <img :src="row2[row.jointFeildNames[0]]" class="image">
                <div class="box-cardInfo">
                  <span class="courseName">{{row2[row.jointFeildNames[1]]}}</span>
                  <div class="box-courseInfo">
                    {{row2[row.jointFeildNames[2]]}}
                  </div>
                </div>
                <i v-if="row.isReadonly!=1" class="el-icon-view queryCardItemBtn" @click="editeCardItem(row2,'query',row.modelContent.contentData,row.siteModelFileds)"></i>
                <i v-if="row.isReadonly!=1" class="el-icon-edit eidteCardItemBtn" @click="editeCardItem(row2,'edite',row.modelContent.contentData,row.siteModelFileds)"></i>
                <i v-if="row.isReadonly!=1" class="el-icon-delete deleteCardItemBtn" @click="deleteCardItem(index2,row.modelContent.contentData)"></i>
              </el-card>
              <el-card v-if="row.isReadonly!=1" :body-style="{ padding: '0px' }" class="lastCard" >
                <i style="color: #666666;border: 0.02rem dashed #666666;"
                 class="el-icon-plus" @click="showAddList('add',row.modelContent.contentData,row.siteModelFileds,row.editeModelContent)"></i>
              </el-card>
            </div>
            <div v-else-if="row.styleType==2" :class="tabsObj.tabsClassName[row.styleType]">
              <div class="box-top">
                <el-button style="width:1.2rem;" class="addteacher resetElement" type="primary"
                  :disabled="row.isReadonly==1"
                 @click="showAddTableRow('add',row.modelContent.contentData,row.siteModelFileds,row.editeModelContent)">新增</el-button>
              </div>
              <div class="box-bottom">
                <el-table
                  ref="teacherInfoTable"
                  :data="row.modelContent.contentData"
                  stripe
                  style="'width: 100%;"
                  height="600"
                  class="teacherInfoTable"
                  >
                  <el-table-column
                  v-for="(trow,tindex) in row.siteModelFileds"
                  :key="tindex"
                  :prop="trow.filedName"
                  align="center"
                  :sortable="trow.isSort"
                  :show-overflow-tooltip="true"
                  :label="trow.filedNameLable">
                    <template slot-scope="scope">
                      <img v-if="trow.filedClass=='image'" class="teacherImage" :src="scope.row[trow.filedName]" />
                      <span v-else-if="trow.filedClass=='dateInput'">{{scope.row[trow.filedName]}}</span>
                      <span v-else>{{scope.row[trow.filedName]}}</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                  prop="query"
                  align="center"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button class="oprateBtn"  @click="tableRowClick(scope.row,'query',row.modelContent.contentData,row.siteModelFileds)" type="text" size="medium">查看</el-button>
                    <el-button class="oprateBtn" :disabled="row.isReadonly==1"  @click="tableRowClick(scope.row,'edite',row.modelContent.contentData,row.siteModelFileds)" type="text" size="medium">编辑</el-button>
                    <el-button class="oprateBtn" :disabled="row.isReadonly==1"  @click="tableRowClick(scope.row,'delete',row.modelContent.contentData,row.siteModelFileds)" type="text" size="medium">删除</el-button>
                  </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>

        </el-tabs>
        <div class="btnbox">
          <el-button :disabled="templatePageUrl?false:true" class="popularize resetElement" type="primary" plain @click="popularizeClick">推广</el-button>
          <div>
            <el-button v-if="hasApi('templateSaveAndApply')" class="saveapply resetElement" type="primary" @click="saveApply">保存并应用</el-button>
            <el-button v-if="hasApi('getSitetemplateInfoSave')" class="save" type="primary resetElement" @click="save">保存</el-button>
          </div>
        </div>
      </div>
     
    </div>
    
    <!-- 公共编辑弹窗 -->
    <el-dialog class="ow_editeCommonPopup scrollbarstyle" :modal="false" :title="editeCommonPopup.title"
     :close-on-click-modal="false"
     :visible.sync="editeCommonPopup.visible">
      <editeCommonPopup v-if="editeCommonPopup.visible" ref="ow_editeTeacher" :editeCommonPopup='editeCommonPopup' @callback="editeCommonPopupCallBack">
      </editeCommonPopup>
    </el-dialog>
     <!-- 推广 -->
    <el-dialog class="ow_popularizePopup scrollbarstyle" :modal="false" :title="popularizePopup.title" :visible.sync="popularizePopup.visible">
      <popularizePopup v-if="popularizePopup.visible" ref="ow_popularizePopup" :popularize='popularizePopup.data'></popularizePopup>
    </el-dialog>

  </div>
</template>

<script>
// import editor from '@/components/common/editor'
import wangeditor from './wangeditor'
import popularizePopup from './popularize'
import dynamicForm from './dynamicForm'
import editeCommonPopup from './editeCommonPopup'
import Vue from 'vue'
export default {
  components:{popularizePopup,dynamicForm,editeCommonPopup,wangeditor},
  props:['detailset'],
  data() {
    return {
      tabsObj:{
        activeName:'',
        tabsClassName:[
          '','basicInfo','teacherInfo','courseInfo','brandInfo'
        ]
      },
      templateImageSrc:'',
      templatePageUrl:null,
      /**
       * 动态官网字段：
       * @param type 1-表单；2-表格；4-单个富文本编辑器；3-卡片
       * @param data.type {"input#单文本框", "textarea#多文本框", "dateInput#日期输入" 
       * "image#单图上传", "images#多图上传", "radio#单选", "checkbox#多选", "select#列表", 
       * "editor#编辑器", "link#链接"}
       */
      dynamicData:[],
      
      //其他控件
      editeCommonPopup:{
        title:'公共',
        visible:false,
        group:'',
        data:null
      },
      popularizePopup:{
        title:'',
        visible:false,
        data:null
      },
      userLevel:-1,
      templateApplyParentId:'',
      _templateApplyId:''
    };
  },
  methods: {
    init(){
      let self=this;
      this.dynamicData=[];
      this.$nextTick(_ => {
        // debugger
        api.getSitetemplateApplyInfoById({templateApplyId:this.detailset.templateApplyId}).then(function(d){
          // console.log(d)
          // debugger
          if(d.result=='操作成功'){
            for(let i=0;i<d.info.columnViews.length;i++){
              if(d.info.columnViews[i].modelContent)
                d.info.columnViews[i].modelContent.contentData=JSON.parse(d.info.columnViews[i].modelContent.contentData);
              if(d.info.columnViews[i].isMain==1){
                self.tabsObj.activeName=d.info.columnViews[i].columnName;
              }
            }
            self.dynamicData=d.info.columnViews;
            self.formateData(self.dynamicData);
            self.templateImageSrc=d.info.templateApply.templateApplyFirstFigure;
            
            self.templatePageUrl=null;
            self.templateApplyParentId=d.info.templateApply.templateApplyParentId;
            self._templateApplyId=d.info.templateApply.templateApplyId;
          }
        });
      });
      
    },
    /**根据角色权限限制操作 */
    disableOperationByRole() {
      switch (this._userInfo.roleMode) {
        //超级管理员
        case 0: {
        
          break;
        }
        //机构管理员
        case 1: {
          this.userLevel=1;
          break;
        }
        //校区管理员
        case 2: {
          this.userLevel=2;
          break;
        }
      }
      // console.log(this.userLevel)
    },
    updateData(){
      // console.log(this.detailset)
      // debugger
      this.dynamicData=this.detailset.columnViews;
      this.formateData(this.dynamicData);
      this.templateImageSrc=this.detailset.templateApply.templateApplyFirstFigure;
      this.tabsObj.activeName=this.detailset.columnViews[0].columnName;
      this.templateApplyParentId=this.detailset.templateApply.templateApplyParentId;
      this._templateApplyId=this.detailset.templateApply.templateApplyId;
      if(this.detailset.siteUrl){
        this.reflashTemplatePage(this.detailset.siteUrl);
      }
    },
    /**保存后刷新数据 */
    reflashDataById(id){
      let self=this;
       api.getSitetemplateApplyInfoById({templateApplyId:id})
        .then(function(d){
          // console.log(d);
          if(d.result=='操作成功'){
            for(let i=0;i<d.info.columnViews.length;i++){
              if(d.info.columnViews[i].modelContent)
              d.info.columnViews[i].modelContent.contentData=JSON.parse(d.info.columnViews[i].modelContent.contentData);
            }
            self.dynamicData=d.info.columnViews;
            self.formateData(self.dynamicData);
            self.templateImageSrc=d.info.templateApply.templateApplyFirstFigure;
            self.tabsObj.activeName=d.info.columnViews[0].columnName;
          }
        });
    },
    /**刷新页面 */
    reflashTemplatePage(url){
      let addp=(new Date()).getTime();
      // console.log(addp)
      this.templatePageUrl=url+'?'+addp;
    },
    /**格式化数据 */
    formateData(data){
      for(let i=0;i<data.length;i++){
        let row=data[i];
        //1-表单；2-表格；4-单个富文本编辑器；3-卡片
        if(!row.modelContent)row.modelContent={};
        if(!row.modelContent.contentData)row.modelContent.contentData=[];
        if((row.styleType==1||row.styleType==4)&&row.modelContent.contentData.length>0){
          this.$set(row,'editeModelContent',row.modelContent.contentData[0]);
        }
        else{
          let defaultvalue={};
          for(let j=0;j<row.siteModelFileds.length;j++){
            defaultvalue[row.siteModelFileds[j].filedName]='';
          }
          this.$set(row,'editeModelContent',defaultvalue);
        }
        
        for(let j=0;j<row.siteModelFileds.length;j++){
          let item=row.siteModelFileds[j];
          if(item.filedClass=='tag'){
            this.$set(item,'filedReferencesArray',[]);
            if(row.editeModelContent[item.filedName]!=''){
              item.filedReferencesArray=row.editeModelContent[item.filedName].split('|');
            }
            else{
              if(item.filedReferencesArray=='')
                item.filedReferencesArray=[];
              else 
                item.filedReferencesArray=item.filedReferences.split('|');
            }
            this.$set(item,'tagInputVisible',false);
            this.$set(item,'tagInputValue','');
            this.$set(item,'tagInputRef','saveTagInput'+j);
          }
          else if(item.filedClass=='radio'||item.filedClass=='checkbox'||item.filedClass=='select'){
            if(item.filedReferencesArray=='')
              item.filedReferencesArray=[];
            else 
              item.filedReferencesArray=item.filedReferences.split('|');
          }
          else if(item.filedClass=='editor'){
            item.editorId='richtxtEditor'+i+''+j;
          }
          else if(item.filedClass=='images'){
            for(let k=0;k<row.modelContent.contentData.length;k++){
              if(row.modelContent.contentData[k][item.filedName]=='')
                row.modelContent.contentData[k][item.filedName]=[];
              else
                row.modelContent.contentData[k][item.filedName]=
                row.modelContent.contentData[k][item.filedName].split('|');
              }
          }
          else if(item.filedClass=='inputGroup'){
            this.$set(item,'inputGroup1','');
            this.$set(item,'inputGroup2','');
            
            // if(row.editeModelContent[item.filedName]){
            //   let val=row.editeModelContent[item.filedName].split('|');
            //   item.inputGroup1=val[0];
            //   item.inputGroup2=val[1];
            // }
           
          }

        }
      }
    },
    // campusChange : function(campusId) { //校区改变
    //   this.init();
    // },
    /**推广 */
    popularizeClick(){
      this.popularizePopup.data={
        pageurl:this.templatePageUrl
      }
      this.popularizePopup.visible=true;
    },
    /**保存并应用 */
    saveApply(){
      this.getImagesData();
      //数据校验
      let checkobj=this.checkData();
      if(!checkobj.success){
        this.$message({
          message: checkobj.msg,
          type: checkobj.type
        });
        return;
      }
      //保存再次确认
      this.$confirm('确定应用后，您的数据将同步至前端界面, 是否继续?', '提示', {
        confirmButtonText: '确定应用',
        cancelButtonText: '再想想',
        type: 'warning'
      }).then(() => {
        //保存并应用
        let param=this.formateSaveParam();//构造入参
        let self=this;
        api.templateSaveAndApply(param).then(function(d){
          // console.log(d)
          if(d.resultCode==2000){
            self.$message({
              message: '应用成功！',
              type: 'success'
            });
            self.reflashTemplatePage(d.info.siteUrl);
          }
          else if(d.resultCode==4037){
            self.$message({
              dangerouslyUseHTMLString: true,
              message: d.message.replace(/;/g,'<br>'),
              type:'error',
              customClass:'websiteSaveError'
            });
          }
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消应用'
        });      
      });
      
    },
    /**保存 */
    save(){
      this.getImagesData();
      //数据校验
      let checkobj=this.checkData();
      if(!checkobj.success){
        this.$message({
          message: checkobj.msg,
          type: checkobj.type
        });
        return;
      }
      //保存再次确认
      this.$confirm('确定保存后,您的数据将缓存但不应用至前端, 是否继续?', '提示', {
        confirmButtonText: '确定保存',
        cancelButtonText: '再想想',
        type: 'warning'
      }).then(() => {
        //保存
        let param=this.formateSaveParam();//构造入参
        let self=this;
        api.getSitetemplateInfoSave(param).then(function(d){
          // console.log(d);
          if(d.resultCode==2000){
            self.$message({
              message: '保存成功！',
              type: 'success'
            });
            // self.reflashDataById(d.info.templateApplyId);
          }else if(d.resultCode==4037){
            self.$message({
              dangerouslyUseHTMLString: true,
              message: d.message.replace(/;/g,'<br>'),
              type:'error',
              customClass:'websiteSaveError'
            });
          }
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消保存'
        });      
      });
      
    },
    formateSaveParam(){
      let data=this.dynamicData;
      let param={
        templateApplyParentId:this.templateApplyParentId,
        templateApplyId:this._templateApplyId,
        templateApplyName:this.detailset.templateName,
        // templateApplyFirstFigure:'',
        templateId:this.detailset.templateId,
        orgId:this._orgId,
        campusId:this.$store.state.campusId,
        ramark:this.detailset.ramark,
        siteContents:[],
				_wait:'',
      };
      for(let i=0;i<data.length;i++){
        let row=data[i];
        //1-表单；2-表格；4-单个富文本编辑器；3-卡片
        if(row.styleType==1){
          for(let j=0;j<row.siteModelFileds.length;j++){
            let item=row.siteModelFileds[j];
            if(item.filedClass=='tag'){
              row.editeModelContent[item.filedName]=item.filedReferencesArray.join('|');
            }
            if(item.filedClass=='checkbox'){
              row.editeModelContent[item.filedName]=row.editeModelContent[item.filedName].join('|');
            }
            if(item.filedClass=='images'){
              let images=[];
              row.editeModelContent[item.filedName].forEach(d=>{
                images.push(d.url);
              });
              row.editeModelContent[item.filedName]=images.join('|');
            }
          }
          // param.templateApplyId=row.modelContent?row.modelContent.templateApplyId:'';
          param.siteContents.push({
            templateApplyId:row.modelContent?row.modelContent.templateApplyId:'',
            contentId:row.modelContent?row.modelContent.contentId:'',
            columnId:row.columnId,
            contentData:JSON.stringify([row.editeModelContent])
          });
        }
        else if(row.styleType==2||row.styleType==3){
          for(let j=0;j<row.siteModelFileds.length;j++){
            let item=row.siteModelFileds[j];
            if(item.filedClass=='tag'){
              row.modelContent.contentData.forEach(d=>{
                d[item.filedName]=item.filedReferencesArray.join('|');
              });
            }
            else if(item.filedClass=='checkbox'){
              row.modelContent.contentData.forEach(d=>{
                d[item.filedName]=d[item.filedName].join('|');
              });
            }
            else if(item.filedClass=='images'){
              row.modelContent.contentData.forEach(obj=>{
                let images=[];
                obj[item.filedName].forEach(d=>{
                  images.push(d.url);
                });
                obj[item.filedName]=images.join('|');
              });
              
            }
          }
          // param.templateApplyId=row.modelContent?row.modelContent.templateApplyId:'';
          param.siteContents.push({
            templateApplyId:row.modelContent?row.modelContent.templateApplyId:'',
            contentId:row.modelContent?row.modelContent.contentId:'',
            columnId:row.columnId,
            contentData:JSON.stringify(row.modelContent.contentData)
          });
        }
        else if(row.styleType==4){
          // param.templateApplyId=row.modelContent?row.modelContent.templateApplyId:'';
          param.siteContents.push({
            templateApplyId:row.modelContent?row.modelContent.templateApplyId:'',
            contentId:row.modelContent?row.modelContent.contentId:'',
            columnId:row.columnId,
            contentData:JSON.stringify([row.editeModelContent])
          });
        }
        
        
      }
      // debugger
      return param;
    },
    /**校验数据
     * @returns {success,type,msg}
     */
    checkData(){
      let data=this.dynamicData;
      for(let i=0;i<data.length;i++){
        let rowtype=data[i];
        //1-表单；2-表格；4-单个富文本编辑器；3-卡片
        // debugger
        if(rowtype.styleType==1){
          let valueData=rowtype.editeModelContent;
          for(let j=0;j<rowtype.siteModelFileds.length;j++){
            let row=rowtype.siteModelFileds[j];
            if(row.isRequired=='1'){
              let value=valueData[row.filedName];
              let msg=row.filedNameLable+'不可为空！';
              //数组
              if(row.filedClass=='tag'){
                if(row.filedReferencesArray.length==0){
                  return {success:false,type:'warning',msg:msg};
                }
              }
              else if(row.filedClass=='checkbox'){
                if(value.length==0){
                  return {success:false,type:'warning',msg:msg};
                }
              }
              else if(row.filedClass=='images'){
                if(value.length==0){
                  return {success:false,type:'warning',msg:msg};
                }
              }
              //对象
              else if(row.filedClass=='dateInput'){
                if(!value){
                  return {success:false,type:'warning',msg:msg};
                }
              }
              //字符串
              else{
                if(value===''){
                  return {success:false,type:'warning',msg:msg};
                }
              }

              //字段校验
              if(row.filedClass=='input'&&row.filedRegularExpression){
                msg=row.filedNameLable+'：'+(row.filedCheckTips||'格式错误');
                //正则校验
                let checkExp=new RegExp(row.filedRegularExpression);
                if(!checkExp.test(value)){
                  return {success:false,type:'warning',msg:msg};
                }
              }
              else if(row.filedClass=='inputGroup'&&row.filedRegularExpression){
                msg=row.filedNameLable+'：'+(row.filedCheckTips||'格式错误');
                //正则校验
                let checkExp=new RegExp(row.filedRegularExpression);
                let nums=value.split('|');
                if(nums.length==2)
                  if(!checkExp.test(nums[0])||!checkExp.test(nums[1])){
                    return {success:false,type:'warning',msg:msg};
                  }
              }

            }
          }
        }
        else if((rowtype.styleType==2||rowtype.styleType==3)&&rowtype.isRequired==1){
          if(rowtype.modelContent.contentData.length===0){
            let msg=rowtype.columnName+'不可为空！';
            return {success:false,type:'warning',msg:msg};
          }
        }
        else if(rowtype.styleType==4&&rowtype.isRequired==1){
          let valueData=rowtype.editeModelContent;
          for(let j=0;j<rowtype.siteModelFileds.length;j++){
            let row=rowtype.siteModelFileds[j];
            if(row.isRequired=='1'){
              let value=valueData[row.filedName];
              let msg=row.filedNameLable+'不可为空！'
              if(value===''){
                return {success:false,type:'warning',msg:msg};
              }
            }
          }
        }
        
      }
      return {success:true,type:'success',msg:'保存成功'};
    },
    /**
     * 富文本编辑器获取值
     */
    // getRichTxtEditorHtml(){
    //   let data=this.dynamicData;
    //   for(let i=0;i<data.length;i++){
    //     let rowi=data[i];
    //     if(rowi.styleType==4){
    //       let editorId=rowi.siteModelFileds[0].editorId;
    //       let filedName=rowi.siteModelFileds[0].filedName;
    //       if(this.$refs[editorId])
    //         rowi.editeModelContent[filedName]=this.$refs[editorId][0].getContentHtml();
    //     }
    //   }
      
    // },
     /**
     * 获取图片数据
     */
    getImagesData(){
      let data=this.dynamicData;
      for(let i=0;i<data.length;i++){
        let rowi=data[i];
        if(rowi.styleType==1){
          let dynamicFormId='pdynamicForm'+rowi.columnId;
          for(let j=0;j<rowi.siteModelFileds.length;j++){
            let rowj=rowi.siteModelFileds[j];
            if(rowj.filedClass=='image'){
              rowi.editeModelContent[rowj.filedName]=
              this.$refs[dynamicFormId][0].singleImageUploadUrl[rowj.filedName];
            }
            else if(rowj.filedClass=='images'){
              rowi.editeModelContent[rowj.filedName]=
              this.$refs[dynamicFormId][0].multiImageUploadList[rowj.filedName];
            }
          }
        }
      }
    },
    tabshandleClick(tab, event){
      // console.log(tab, event);
    },
    templateSelect(){
      this.$emit('openTemplateSelect');
    },
    /**公共编辑组件-回调函数 */
    editeCommonPopupCallBack(d){
      // console.log(d)
      let newvalue=tool.clone(d);
      if(this.editeCommonPopup.group=='table'){
        if(this.editeCommonPopup.type=='add'){
          this.editeCommonPopup.modelContent.splice(0,0,newvalue);
        }
        else if(this.editeCommonPopup.type=='edite'){
          
          this.editeCommonPopup.modelContent.splice(this.editeCommonPopup.index_all,1,newvalue);
        } 
        
      }
      else if(this.editeCommonPopup.group=='list'){
        if(this.editeCommonPopup.type=='add'){
          this.editeCommonPopup.modelContent.push(newvalue);
        }
        else if(this.editeCommonPopup.type=='edite'){
          this.editeCommonPopup.modelContent.splice(this.editeCommonPopup.index_all,1,newvalue);
        } 
      }
    },
    /** */
    showAddTableRow(type,all,allfields,editerow){
      let titles={add:'新增',query:'查看',edite:'编辑'}
      this.editeCommonPopup.type=type;
      this.editeCommonPopup.title=titles[type];
      this.editeCommonPopup.group='table';
      this.editeCommonPopup.siteModelFileds=allfields;
      this.editeCommonPopup.modelContent=all;
      this.editeCommonPopup.editeModelContent=editerow;
      this.editeCommonPopup.visible=true;
    },
    showAddList(type,all,allfields,editerow){
      let titles={add:'新增',query:'查看',edite:'编辑'}
      this.editeCommonPopup.type=type;
      this.editeCommonPopup.title=titles[type];
      this.editeCommonPopup.group='list';
      this.editeCommonPopup.siteModelFileds=allfields;
      this.editeCommonPopup.modelContent=all;
      this.editeCommonPopup.editeModelContent=editerow;
      this.editeCommonPopup.visible=true;
    },
    editeCardItem(d,type,all,allfields){
      if(type=='query'){
        this.showAddList(type,all,allfields,d);
      }
      else if(type=='edite'){
        this.editeCommonPopup.index_all=all.indexOf(d);
        this.showAddList(type,all,allfields,d);
      }
    },
    deleteCardItem(index,data){
      data.splice(index, 1);
    },
    /**表格行点击 */
    tableRowClick(d,type,all,allfields){
      // console.log(all)
      
      if(type=='query'){
        this.showAddTableRow(type,all,allfields,d);
      }
      else if(type=='edite'){
        this.editeCommonPopup.index_all=all.indexOf(d);
        this.showAddTableRow(type,all,allfields,d);
      }
      else if(type=='delete'){
        all.splice(all.indexOf(d), 1);
      }
    }
  },
  mounted() {
    // this.init();
    let user=JSON.parse(tool.getItem(window.lsKey.user));
    this._userInfo=user;
     this.disableOperationByRole();
    this._orgId=user.orgId;
  },
  computed: {},
  watch: {},
  created: function() {}
};
</script>

<style lang="scss">
.ow_detailset {
  .content-detail {
    padding: 0 0.04rem 0rem 0.04rem;
		font-size: 0.16rem;
    display: flex; 
    justify-content: center;
    height: 7.8rem;
    .leftbox{
      width: 4.11rem;
      height: 100%;
      .officalWeb{
        width: 100%;
        height: 94%;
        // background-color: rgba(0, 255, 255, 0.116);
        background: #fff;
        border: 0.01rem solid #ededed;
        border-radius: 0.1rem;
        -webkit-box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
        box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
      }
    }
    .splitline{
      margin: 0rem 0.39rem;
      padding: 0.3rem 0;
      width: 0.01rem;
      height: 100%;
      background-color: #ebebeb;
      border: 0.01rem solid #ebebeb;
    }
    .rightbox{
      width: 9.5rem;
      height: 100%;
      .el-button{
        font-size: 0.16rem !important;
      }
      .tabsControl{
        .el-tabs__item{
          font-size: 0.2rem !important;
        }
        .el-tabs__content{
          height: 6.8rem;
          overflow: auto;
        }
        .el-tabs__content::-webkit-scrollbar {
          width: 0.05rem;
          height: 0.1rem;
        }
        .el-tabs__content::-webkit-scrollbar-thumb {
          border-radius: 0.5rem;
          background: #BBBBBB;
        }
        .el-tabs__content::-webkit-scrollbar-track {
          background: #F2F6FC;
        }
        
        .basicInfo{

        }
        .brandInfo{

        }
        .courseInfo{
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: flex-start;
          .el-card{
            width: 2.9rem !important;
            height: 2.4rem !important;
            margin-bottom: 0.18rem;
            margin-left: 0.18rem;
            .image{
              width: 100%;
              height: 1.72rem;
            }
            .box-cardInfo{
              width: 100%;
              height: 0.6rem;
              padding: 0.08rem 0.16rem;
              .courseName{
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                display: block;
              }
              .box-courseInfo{
                color: #666666;
                font-size: 0.14rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                display: block;
              }
            }
            .queryCardItemBtn{
              position: absolute;
              margin-top: -0.2rem;
              margin-left: 2.2rem;
              color: #409eff;
            }
            .queryCardItemBtn:hover{
              cursor: pointer;
            }
            .eidteCardItemBtn{
              position: absolute;
              margin-top: -0.2rem;
              margin-left: 2.4rem;
              color: #409eff;
            }
            .eidteCardItemBtn:hover{
              cursor: pointer;
            }
            .deleteCardItemBtn{
              position: absolute;
              margin-top: -0.2rem;
              margin-left: 2.6rem;
              color: #409eff;
            }
            .deleteCardItemBtn:hover{
              cursor: pointer;
            }
            
          }
          .lastCard{
            font-size: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .lastCard:hover{
            cursor: pointer;
          }
        }
        .teacherInfo{
          .box-top{
            text-align: right;
          }
          .teacherImage{
            height: 0.5rem;
          }
          .oprateBtn{
            width: 100%;
            margin-left: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
          }
          .el-table{
            font-size: 0.16rem !important;
          }
        }
        .schoolInfo{
          // .box-label{
          //   .toptxt{
          //     width: 100%;
          //     color: #666666;
          //     font-style: italic;
          //     display: inline-block;
          //   }
          //   .el-tag  {
          //     margin-left: 10px;
          //   }
          //   .button-new-tag {
          //     margin-left: 10px;
          //     height: 32px;
          //     line-height: 30px;
          //     padding-top: 0;
          //     padding-bottom: 0;
          //   }
          //   .input-new-tag {
          //     width: 90px;
          //     margin-left: 10px;
          //     vertical-align: bottom;
          //   }
          // }
        }
      }
      .btnbox{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 0.05rem;
        .popularize{
          width: 1.6rem !important;
          // margin-left: 0.16rem;
          font-size: 0.16rem !important;
        }
        .saveapply {
          width: 1.6rem !important;
          // margin-left: 3.8rem;
          font-size: 0.16rem !important;
        }
        .save {
          width: 1.6rem !important;
          margin-left: 0.2rem;
          font-size: 0.16rem !important;
        }
      }
    }
    
  }
  // 滚动条
  .scrollbarstyle::-webkit-scrollbar {
    width: 0.05rem;
    height: 0.1rem;
  }
  .scrollbarstyle::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    background: #BBBBBB;
  }
  .scrollbarstyle::-webkit-scrollbar-track {
    background: #F2F6FC;
  }
}
.el-tooltip__popper{
  max-width: 6rem;
}
.websiteSaveError{
  height:unset !important;
  width: unset !important;
}
</style>